<template>
  <div class="wiki fix_top">
    <div class="banner wiki_card">
      <!-- 本模块信息 -->
      <div class="wiki_top">
        <!-- <div>
          <h3>今日发布：</h3>
          <span class="redColour">{{ 0 }}</span>
        </div>
        <div class="jiange">|</div> -->
        <div>
          <h3>总数：</h3>
          <span class="redColour">{{ total }}</span>
        </div>
      </div>
      <!-- 分类查询 -->
      <div>
        <div class="wiki_category">
          <h3>版本：</h3>
          <div class="wiki_category_item">
            <el-select v-model="winnow.eId" clearable placeholder="不限" @change="getWikiList">
              <el-option
                v-for="eItem in editions"
                :key="eItem.eId"
                :label="eItem.eName"
                :value="eItem.eId"

                >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="wiki_category">
          <h3>领域：</h3>
          <div class="wiki_category_item">
            <el-select v-model="winnow.tId" clearable placeholder="不限" @change="getWikiList">
              <el-option
                 v-for="tItem in tags"
                :key="tItem.tId"
                :label="tItem.tName"
                :value="tItem.tId"
                >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- 查询内容 -->
      <div class="wiki_contents" v-if="wikiMes.length>0">
        <el-card
          shadow="hover"
          v-for="wItem in wikiMes"
          :key="wItem.pId"
          class="wiki_contents_item"
          style="padding:0"
          @click.native="toDetails(wItem)"
        >
          <h4 class="wiki_contents_title">{{ wItem.titleName }}</h4>
          <img :src="wItem.pImg" alt="" class="wiki_contents_wImg" />
          <div class="wiki_contents_item_mes">
            <div class="wiki_contents_item_mesLeft">
              <img :src="wItem.uAvatar" alt="" class="user_avatar" />
              <h4>{{ wItem.username }}</h4>
            </div>
            <div class="wiki_contents_item_mesRight">
              <div>
                <i class="iconfont icon-chakan deepIcon"></i>
                <span>{{ wItem.viewNums }}</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi deepIcon"></i>
                <span>{{ wItem.replyNums }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
      <div class="block">
        <el-pagination
          :current-page="winnow.pageNo"
          :page-sizes="[6, 15, 30, 60, 90]"
          :page-size="winnow.pageSize"
          :total="selectTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 回到顶部 -->
    <el-backtop :visibility-height="100">UP</el-backtop>
  </div>
</template>
<script>
export default {
  inject:['reload'],//注入依赖
  name: 'Tabbar',
  data () {
    return {
      total: 0,
      selectTotal:0,
      winnow:{
        pageNo: 1,
        pageSize: 6
      },
      editions: [],
      tags: [],
      allWikiMes: [], //所有wiki信息
      wikiMes: [] //筛选后的wiki信息
    }
  },
  created () {
    this.getAllEditions()
    this.getTagsList()
    this.getWikiList()
  },
  methods: {
    toDetails (item) {
      console.log(item)
      let params = item
      console.log(params)
      this.$axios.updatePostView(params).then((res) => {
        console.log(res)
        let detail = JSON.stringify(res.data)
        this.$router.push({
          path: '/details',
          query: {
            detail
          } // 要传递的参数
        })
      })
    },
    toEdition(){
      this.reload();
    },
    handleSizeChange (pageSize) {
      this.winnow.pageSize = pageSize
      this.getWikiList()
    },
    handleCurrentChange (pageNo) {
      this.winnow.pageNo = pageNo
      this.getWikiList()
    },
    getAllEditions () {
      this.$axios.getAllEdition().then(res => {
        this.editions = res.data
      })
    },
    getTagsList () {
      this.$axios.getTagsList().then(res => {
        this.tags = res.data
      })
    },
    getWikiList () {
      let params = {}
      params = this.winnow
      console.log(params)
      this.$axios.getWikiList(params).then(res => {
        console.log(res)
        this.wikiMes = res.data.rows
        this.total = res.data.total
        this.selectTotal = res.data.selectTotal
        console.log(this.wikiMes)
      })
    }
  }
}
</script>
<style scoped>
.wiki_card {
  margin: 20px auto;
  background-color: rgb(232 246 255 / 23%);
  border-radius: 5px;
  padding: 10px;
}

.wiki_top,
.wiki_top > div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.jiange {
  margin: 0 10px;
}

.wiki_category {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.wiki_category_item span {
  margin: 10px;
}

.wiki_contents {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}


.wiki_contents_item {
  width: 350px;
  margin: 20px;
  position: relative;
  border-radius: 10px;
  box-shadow: 2px 2px 7px 0px rgb(212 210 210 / 27%);
}
.wiki_contents_title {
  background-color: rgb(152, 176, 190);
  box-sizing: border-box;
  color: #fff;
  width: 89%;
  height: 50px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
  padding: 10px;
  position: absolute;
}

.wiki_contents_wImg {
  width: 100%;
  height: 200px;
  border-radius: 10px 10px 0 0;
}
.wiki_contents_item_mes {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
}
.wiki_contents_item_mesLeft,
.wiki_contents_item_mesRight {
  display: flex;
  align-items: center;
}
.wiki_contents_item_mesLeft > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.wiki_contents_item_mesRight div {
  font-size: 15px;
}
.wiki_contents_item_mesRight div i {
  margin-left: 10px;
}
</style>
